import React, { Component } from 'react';
import styles from './index.css';
import { connect } from 'dva';
import { Button } from 'antd';
import { RouteComponentProps } from 'react-router-dom';
import { Dispatch, AnyAction } from 'redux';
import { getDeviceDetail } from '@/services/device'
import { BaseForm, ImgAndRemarkForm, OtherForm } from './components';
import _ from 'lodash';
import { DeviceInfo } from '@/models/device';
import produce, { Draft } from 'immer';

interface FormProps extends RouteComponentProps<{ deviceTypeNo: string; deviceId?: string }> {
  dispatch: Dispatch<AnyAction>;
}
interface FormState {
  deviceInfo: DeviceInfo;
}

class Form extends Component<FormProps, FormState> {

  state: FormState = {
    deviceInfo: {
      brandNo: '',
      createId: 0,
      createTime: '',
      deleteFalg: 0,
      departmentId: 0,
      deviceId: 0,
      deviceName: '',
      deviceState: 0,
      deviceTypeNo: 0,
      deviceTypeParentNo: 0,
      extendedField: '',
      firstTreeTypeId: 0,
      groupId: 0,
      mainImage: '',
      maintenanceCycle: '',
      model: '',
      stateCode: 0,
      positionDetails: '',
      productionCompany: '',
      productionTime: '',
      purchaseTime: '',
      remarks: '',
      serialNumber: '',
      serviceLife: '',
      sort: 0,
      specs: '',
      supplyCompany: '',
      treeTypeId: 0,
      unitNameId: 0,
      updateId: 0,
      updateTime: '',
      useTime: '',
      useUser: '',
    },
  };

  async componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'device/getDeviceTypeNoOptions',
      payload: match.params.deviceTypeNo,
    });
    dispatch({
      type: 'device/getAreaOptions',
    });
    if(match.params.deviceId) {
      const [err, data] = await getDeviceDetail({deviceId: match.params.deviceId});
      if(!err) {
        this.setState(produce((draft: Draft<FormState>): void => {
          draft.deviceInfo = data || {};
        }));
      }
    }
  }

  render() {
    const { match, history } = this.props;
    const { deviceInfo } = this.state;

    const deviceTypeNo = +match.params.deviceTypeNo;
    const deviceId = match.params.deviceId;
    const titleStyle = {
      position: 'absolute',
      top: '-25px',
      left: 0,
      color: '#e0dcdc',
    }
    return (
      <div className={styles.container}>
        <span style={titleStyle}>位置: 设备详情</span>
        <div className={styles.box}>
          <div className={styles.wrapper}>
            <div className={styles.tag}>
              <span className={styles.title}>基本信息</span>
            </div>
            <BaseForm
              deviceTypeNo={deviceTypeNo}
              deviceId={deviceId}
              deviceInfo={deviceInfo}
            />
          </div>
          <div className={styles.wrapper}>
            <div className={styles.tag}>
              <span className={styles.title}>备注</span>
            </div>
            <ImgAndRemarkForm deviceInfo={deviceInfo} />
          </div>
          <div className={styles.wrapper}>
            <div className={styles.tag}>
              <span className={styles.title}>其他信息</span>
            </div>
            <OtherForm deviceInfo={deviceInfo} />
          </div>
        </div>
        <div className={styles.btn}>
          <Button className={styles.antBtn3} onClick={() => history.goBack()}>返回</Button>
        </div>
      </div>
    );
  }
}

export default connect()(Form);
